<template>
  <div>
    <Header/>
    <div class="main">
      <el-row>
        <el-col :offset="2" :span="20">
          <el-container>
            <el-main>
              <el-row>
                <el-col :span="3">
                  <div class="main-left">
                    <div class="user-info-card" style="width: 100%;">
                      <el-avatar :size="120" :src="showAvatar" @error="avatarError">
                        <img :src="require('@/assets/image/me.jpg')" alt="">
                      </el-avatar>
                      <div class="info-box" v-if="userInfo">
                        <p class="info-username">{{ userInfo.nickname ? userInfo.nickname : userInfo.username }}</p>
                        <p class="info-introduction">
                          {{ userInfo.introduce ? userInfo.introduce : '这个家伙很懒，什么也没留下...' }}
                        </p>
                      </div>
                      <div class="info-box" v-else>
                        <p class="info-username">小七</p>
                        <p class="info-introduction">爱而不得是人间常态，你我又不是什么例外</p>
                      </div>
                    </div>
                    <div class="nav-box">
                      <div class="nav-title">
                        <span class="nav-text">导航</span>
                      </div>
                      <div class="nav-item" @click="goto('/index','Index')">
                        <i class="iconfont icon-shouye2 nav-icon"></i>
                        <span class="nav-text">首页</span>
                      </div>
                      <div class="nav-item" @click="goto('/tag/blogList' , 'TagBlogList')">
                        <i class="iconfont icon-biaoqian nav-icon"></i>
                        <span class="nav-text">标签</span>
                      </div>
                      <div class="nav-item">
                        <i class="iconfont icon-lianjie1 nav-icon"></i>
                        <span class="nav-text">友情链接</span>
                      </div>
                      <el-collapse-transition>
                        <div class="nav-item" v-show="!userInfo" @click="goto('/login','Login')">
                          <i class="iconfont icon-denglu nav-icon"></i>
                          <span class="nav-text">登录显示更多...</span>
                        </div>
                      </el-collapse-transition>
                      <el-collapse-transition>
                        <div v-show="userInfo">
                          <div>
                            <div class="nav-item">
                              <i class="iconfont icon-track nav-icon"></i>
                              <span class="nav-text">足迹</span>
                            </div>
                            <div class="nav-item">
                              <i class="iconfont icon-icon-test nav-icon"></i>
                              <span class="nav-text">我的收藏</span>
                            </div>
                            <div class="nav-item" @click="goto('/admin','Admin')">
                              <i class="iconfont icon-com-sys nav-icon"></i>
                              <span class="nav-text">管理后台</span>
                            </div>
                          </div>
                        </div>
                      </el-collapse-transition>
                    </div>
                    <div class="constitute-box">
                      <div class="con-title">
                        <span class="con-text">组成</span>
                      </div>
                      <el-menu
                        class="el-menu-vertical-demo">
                        <el-submenu index="1">
                          <template slot="title">
                            <div>
                              <i class="iconfont icon-category-white con-icon"></i>
                              <span class="con-text">分类</span>
                            </div>
                          </template>
                          <el-menu-item-group>
                            <el-menu-item v-for="item in categoryList" :key="item.id"
                                          @click.native="goto('/category/blogList','CategoryBlogList',{categoryName:item.categoryName,categoryId:item.id})">
                              <template>
                                <div class="cons-item">
                                  <span class="con-text">{{ item.categoryName }}</span>
                                </div>
                              </template>
                            </el-menu-item>
                          </el-menu-item-group>
                        </el-submenu>
                      </el-menu>
                    </div>
                  </div>
                </el-col>
                <el-col :span="18">
                  <div style="padding: 0 30px;">
                    <div style="height: 1px;margin: 0;padding: 0;"></div>
                    <router-view/>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="main-right">
                    <div class="tool-panel">
                      <el-tabs v-model="activeName" @tab-click="tabChange">
                        <el-tab-pane name="hot">
                          <template slot="label">
                            <i class="iconfont icon-remen1"></i>
                          </template>
                          <div>
                            <h3 class="tool-title">热门文章</h3>
                            <div class="tool-blog-item">
                              <div>
                                <el-avatar shape="square" size="medium"
                                           :src="require('@/assets/image/me.jpg')"></el-avatar>
                              </div>
                              <div>
                                <div>
                                  <p>RSS-万物皆可订，零基础用PM2管理器搭建私人RSSHub和跨域服务订阅微博和B站等优质内容</p>
                                </div>
                                <div>
                                  <i class="iconfont icon-eyes"></i>&nbsp;
                                  <span>2020</span>
                                </div>
                              </div>
                            </div>
                            <div class="tool-blog-item">
                              <div>
                                <el-avatar shape="square" size="medium"
                                           :src="require('@/assets/image/me.jpg')"></el-avatar>
                              </div>
                              <div>
                                <div>
                                  <p>RSS-万物皆可订，零基础用PM2管理器搭建</p>
                                </div>
                                <div>
                                  <i class="iconfont icon-eyes"></i>&nbsp;
                                  <span>2020</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </el-tab-pane>
                        <el-tab-pane name="new">
                          <template slot="label">
                            <i class="iconfont icon-zuixin"></i>
                          </template>
                          <div>
                            <h3 class="tool-title">最新文章</h3>
                            <div class="tool-blog-item">
                              <div>
                                <el-avatar shape="square" size="medium"
                                           :src="require('@/assets/image/me.jpg')"></el-avatar>
                              </div>
                              <div>
                                <div>
                                  <p>RSS-万物皆可订，零基础用PM2管理器搭建私人RSSHub和跨域服务订阅微博和B站等优质内容</p>
                                </div>
                                <div>
                                  <i class="iconfont icon-eyes"></i>&nbsp;
                                  <span>2020</span>
                                </div>
                              </div>
                            </div>
                            <div class="tool-blog-item">
                              <div>
                                <el-avatar shape="square" size="medium"
                                           :src="require('@/assets/image/me.jpg')"></el-avatar>
                              </div>
                              <div>
                                <div>
                                  <p>RSS-万物皆可订，零基础用PM2管理器搭建</p>
                                </div>
                                <div>
                                  <i class="iconfont icon-eyes"></i>&nbsp;
                                  <span>2020</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </el-tab-pane>
                        <el-tab-pane name="random">
                          <template slot="label">
                            <i class="iconfont icon-suiji"></i>
                          </template>
                          <div>
                            <h3 class="tool-title">随机文章</h3>
                            <div class="tool-blog-item">
                              <div>
                                <el-avatar shape="square" size="medium"
                                           :src="require('@/assets/image/me.jpg')"></el-avatar>
                              </div>
                              <div>
                                <div>
                                  <p>RSS-万物皆可订，零基础用PM2管理器搭建私人RSSHub和跨域服务订阅微博和B站等优质内容</p>
                                </div>
                                <div>
                                  <i class="iconfont icon-eyes"></i>&nbsp;
                                  <span>2020</span>
                                </div>
                              </div>
                            </div>
                            <div class="tool-blog-item">
                              <div>
                                <el-avatar shape="square" size="medium"
                                           :src="require('@/assets/image/me.jpg')"></el-avatar>
                              </div>
                              <div>
                                <div>
                                  <p>RSS-万物皆可订，零基础用PM2管理器搭建</p>
                                </div>
                                <div>
                                  <i class="iconfont icon-eyes"></i>&nbsp;
                                  <span>2020</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                    <div>
                      <h3 class="tool-title">博客信息</h3>
                      <el-card class="box-card">
                        <div class="blog-info-item">
                          <div>
                            <i class="el-icon-document"></i>&nbsp;
                            <span class="tool-title">文章数目</span>
                          </div>
                          <div>
                            <el-tag size="mini" type="success" :closable="false" effect="dark">1</el-tag>
                          </div>
                        </div>
                        <div class="blog-info-item">
                          <div>
                            <i class="el-icon-chat-square"></i>&nbsp;
                            <span class="tool-title">评论数目</span>
                          </div>
                          <div>
                            <el-tag size="mini" type="info" :closable="false" effect="dark">23123</el-tag>
                          </div>
                        </div>
                        <div class="blog-info-item">
                          <div>
                            <i class="el-icon-user"></i>&nbsp;
                            <span class="tool-title">总访客量</span>
                          </div>
                          <div>
                            <el-tag size="mini" type="warning" :closable="false" effect="dark">223</el-tag>
                          </div>
                        </div>
                      </el-card>
                    </div>
                    <div>
                      <h3 class="tool-title">标签云</h3>
                      <div class="tag-list">
                        <el-tag size="mini" type="success" :closable="false" effect="dark">JS</el-tag>
                        <el-tag size="mini" type="info" :closable="false" effect="dark">Java</el-tag>
                        <el-tag size="mini" type="danger" :closable="false" effect="dark">C++</el-tag>
                        <el-tag size="mini" type="warning" :closable="false" effect="dark">C语言</el-tag>
                        <el-tag size="mini" type="warning" :closable="false" effect="dark">算法</el-tag>
                        <el-tag size="mini" type="warning" color="#00BB33" :closable="false" effect="dark">数据结构</el-tag>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-main>
          </el-container>
        </el-col>
      </el-row>
      <div style="margin-top: 20px">
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";

export default {
  name: 'Home',
  data() {
    return {
      activeName: "hot",
      categoryList: []
    }
  },
  computed: {
    showAvatar() {
      let user = this.$store.getters.getUserInfo;
      if (user) {
        if (user.avatar) {
          return user.avatar;
        }
      }
      return require('@/assets/image/me.jpg');
    },
    userInfo() {
      return this.$store.getters.getUserInfo;
    }
  },
  methods: {
    avatarError() {
      return true;
    },
    tabChange(tab, event) {

    },
    goto(path, name, data) {
      this.$store.commit('setCategory', data);
      this.$router.push({
        path, name
      });
    },
    getAllCategory() {
      this.$get(this.$api.CATEGORY_LIST_URL + "/1/100", {}).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.categoryList = res.data.data.records;
        }
      })
    }
  },
  components: {
    Header
  },
  created() {
    this.getAllCategory();
  }
}
</script>

<style scoped>
.main {
  margin-top: 7vh;
}

.el-container > .el-main {
  width: 100vw;
  position: relative;
  background-color: white;
  box-shadow: 0px 0px 15px 1px #75e29d;
  padding: 15px 15px 15px 0px;
  box-sizing: content-box;
  border-radius: 5px;
}

.main-left, main-right {
  min-height: 99vh;
  position: relative;
  box-sizing: border-box;
}

.test {
  height: 99.6vh;
}

.user-info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.user-info-card > .info-box {
  width: 100%;
  height: 100%;
  text-align: center;
}

.user-info-card > .info-box > .info-username {
  font-weight: bolder;
  font-size: 16px;
  font-family: '微软雅黑', 'Arial';
  color: #777777;
}

.user-info-card > .info-box > .info-introduction {
  font-size: 12px;
  color: #98a6ad;
  padding: 0 5px;
}

.nav-box {
  margin-top: 20px;
}

.nav-title > .nav-text {
  font-size: 12px;
  color: #98a6ad;
  margin-left: 5px;
}

.nav-item {
  line-height: 60px;
  cursor: pointer;
}

.nav-item:hover {
  background-color: #e4eee5;
  transition: background-color .3s;
}

.nav-item > .nav-icon {
  font-weight: bolder;
  font-size: 16px;
  margin-left: 15px;
  color: #797777;
}

.nav-item > .nav-text {
  font-size: 15px;
  margin-left: 20px;
  color: #797777;
}

.constitute-box {
  margin-top: 20px;
}

.constitute-box .con-icon {
  font-weight: bolder;
  font-size: 16px;
  margin-left: 15px;
  color: #797777;
}

.constitute-box .con-title .con-text {
  font-size: 12px;
  color: #98a6ad;
  margin-left: 5px;
}

.constitute-box .con-text {
  font-size: 15px;
  margin-left: 20px;
  color: #797777;
}

.main-right .tool-title {
  font-weight: normal;
  color: #777777;
}

.tool-blog-item {
  display: flex;
  box-sizing: content-box;
  padding: 7px;
  color: #838383;
  cursor: pointer;
}

.tool-blog-item > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.tool-blog-item > div:nth-child(2) > div:nth-child(2) > i {
  font-size: 16px;
}

.tool-blog-item > div:nth-child(2) > div:nth-child(2) {
  font-size: 12px;
  height: 25px;
  display: flex;
  align-items: center;
}

.tool-blog-item p {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.box-card {
  width: 100%;
}

.blog-info-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
}

.tag-list > .el-tag {
  border: 0;
  border-radius: 10px !important;
  margin-left: 5px;
  cursor: pointer;
}

.constitute-box .cons-item {
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
}
</style>
